$(function () {
    let mun = 0
    
    function tabImg(){
        mun = $(this).index()
        changeImg()   
    }

    function imgPrev(){
        mun--
        if (mun === -1) {
            mun = $('.banner>ul>li').length - 1
        }
        changeImg()
    }

    function imgNext() {
        mun++
        if (mun === $('.banner>ul>li').length) {
            mun = 0
        }
        changeImg()
    }
    
    function changeImg(){
        $('.banner>ul>li').attr('class', '').eq(mun).attr('class', 'active')
        $('.pagination span').attr('class', '').eq(mun).attr('class', 'active')
    }
    function autoPlay() {
        clearInterval(autoPlay.t);
        autoPlay.t = setInterval(function () {
            $('.button-next').trigger('click')
        }, 3000)
    }

    function stopPlay() {
        clearInterval(autoPlay.t);
    }
    function pagination(){
        let html = ''
        for(var i=0;i<$('.banner>ul>li').length;i++){
            html += `<span></span>`
        }
        $('.pagination').html(html)
    }
    pagination()
    autoPlay()
    $('.pagination span').eq(mun).attr('class', 'active')
    $('.pagination span').on('mouseover',tabImg)

    $(".banner").on('click', '.button-prev', imgPrev)
    $(".banner").on('click', '.button-next', imgNext)

    $('.banner').on('mouseover',stopPlay)
    $('.banner').on('mouseout',autoPlay)
})